<!--
 * @Author: 李林翰 3560839788@qq.com
 * @Date: 2024-04-01 11:24:52
 * @LastEditors: 李林翰 3560839788@qq.com
 * @LastEditTime: 2024-04-01 13:44:14
 * @FilePath: \deep-cafeteria-wx\src\pages\delivery\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view>
    <div class="big-box">
      <div style="display: flex; justify-content: space-between">
        <div v-for="(item, index) in from" :key="index">
          <div style="
              margin-left: 10rpx;
              color: rgba(35, 35, 35, 1);
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 32rpx;
              margin-bottom: 10rpx;
            ">
            {{ item.title }}：
          </div>
          <div class="dev">
            <div>{{ item.vale }}</div>
            <div>
              <u-icon name="arrow-down" color="#9999" size="16"></u-icon>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between;margin-top: 30rpx;">
        <div v-for="(item, index) in from2" :key="index">
          <div style="
              margin-left: 10rpx;
              color: rgba(35, 35, 35, 1);
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 32rpx;
              margin-bottom: 10rpx;
            ">
            {{ item.title }}：
          </div>
          <div class="dev">
            <div>{{ item.vale }}</div>
            <div>
              <u-icon name="arrow-down" color="#9999" size="16"></u-icon>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 30rpx;">
        <div v-for="(item, index) in from3" :key="index" style="margin-top: 50rpx;">
          <div style="
              margin-left: 10rpx;
              color: rgba(35, 35, 35, 1);
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 32rpx;
              margin-bottom: 10rpx;
            ">
            {{ item.title }}：
          </div>
          <div class="dev1">
            <div>{{ item.vale }}</div>
            <div>
              <u-icon name="arrow-down" color="#9999" size="16"></u-icon>
            </div>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: space-between">
        <div v-for="(item, index) in from4" :key="index" style="margin-top: 50rpx">
          <div style="
              margin-left: 10rpx;
              color: rgba(35, 35, 35, 1);
              font-family: PingFang SC;
              font-weight: 500;
              font-size: 32rpx;
              margin-bottom: 10rpx;
            ">
            {{ item.title }}：
          </div>
          <div class="dev">
            <div>{{ item.vale }}</div>
            <div>
              <u-icon name="arrow-down" color="#9999" size="16"></u-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <div class="canle">取消</div>
        <div class="comfrom">确定</div>
      </div>
    </div>
    <u-picker :show="show" :columns="columns"></u-picker>
  </view>
</template>
<script setup>
const from = ref([
  { title: '配送员', vale: '请选择配送员' },
  { title: '取餐时间', vale: '11:20~11:50' }
])
const from2 = ref([
  { title: '送达时间', vale: '11:20~11:50' },
  { title: '守摊人', vale: '请选择守摊人' }
])
const from3 = ref([
  { title: '取餐店铺', vale: '11:20~11:50' },
  { title: '送餐地址', vale: '请选择守摊人' }
])
const from4 = ref([
  { title: '取餐店铺', vale: '11:20~11:50' },
  { title: '送餐地址', vale: '请选择守摊人' }
])
</script>
<style>
page {
  background: rgba(255, 255, 255, 1);
}

.big-box {
  margin: 40rpx auto;
  width: 690rpx;
}

.dev {
  width: 260rpx;
  height: 76rpx;
  border-radius: 38rpx;
  background: rgba(238, 238, 238, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgba(153, 153, 153, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
}

.dev1 {
  width: 690rpx;
  height: 76rpx;
  border-radius: 38rpx;
  background: rgba(238, 238, 238, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(153, 153, 153, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  padding: 0rpx 20rpx;
}

.btn-box {
  width: 690rpx;
  margin: 100rpx auto;
  display: flex;
  justify-content: space-around;
}

.btn-box .canle {
  width: 180rpx;
  height: 72rpx;
  border-radius: 36rpx;
  border: 2rpx solid rgba(255, 99, 6, 1);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 99, 6, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
}

.comfrom {
  width: 180rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background: rgba(255, 99, 6, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
}
</style>
